<template>
<div>
  <van-nav-bar
    title="发表评论"
    left-arrow
    @click-left="return1"
    style="position: sticky;top: 0"
  >
  </van-nav-bar>
  <div style="padding: 10px">

  <el-input
    type="textarea"
    :autosize="{ minRows: 4, maxRows: 4}"
    placeholder="请输入内容"
    v-model="textarea2">
  </el-input>
    <div style="display:flex;">
      <div style="margin-right: 10px"><van-rate v-model="value" /></div>
      <div>{{cc}}</div>
    </div>

  <el-button style="margin-top: 10px" type="danger" round @click="comment">评价</el-button>
  </div>
</div>
</template>

<script>
import Vue from 'vue';
import {NavBar, Toast} from 'vant';
import { Rate } from 'vant';
import request from "../../utils/request";

Vue.use(Rate);
Vue.use(NavBar);
export default {
  data(){
    return{
      cc:'',
      value:0,
      textarea2:''
    }
  },
  watch:{
    value(newValue ,oldValue){
      if (newValue==1){this.cc='极差'}
      if (newValue==2){this.cc='差'}
      if (newValue==3){this.cc='一般'}
      if (newValue==4){this.cc='良好'}
      if (newValue==5){this.cc='好评'}
    }
  },
  methods:{
    comment(){
      request.post('/comment/addData',{content:this.textarea2,star:this.value,orderId:this.$route.query.itemId}).then(resp=>{
        if (resp.code===0){
          this.return1()
          Toast('评价成功')
        }
      })
    },
    return1(){
      this.$router.push({path:'/orderDetail',query:{itemId:this.$route.query.itemId}})
    }
  }
}
</script>

<style scoped>

</style>
